<template>
    <div class="document-generate-view">
        <!-- 文档编码部分 -->
        <el-card class="section-card">
            <template #header>
                <div class="card-header">
                    <div class="header-content">
                        <document class="iconImg icon-style"></document>
                        <span>文档编码</span>
                    </div>
                </div>
            </template>
            <el-form :model="codeForm" label-width="80px">
                <el-row :gutter="20">
                    <!-- <el-col :span="4" v-for="(field, index) in codeFields" :key="index"> -->
                    <el-col :span="4" v-for="(field, index) in codeFields.slice(0, 2)" :key="index">
                        <!-- 下拉选择框宽度 -->
                        <el-form-item :label="field">
                            <el-select v-model="codeForm[`field${index}`]" placeholder="请选择">
                                <el-option v-for="option in codeOptions[`option${index + 1}`]" :key="option.value" :label="option.label" :value="option.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <!-- 添加日期选择器 -->
                    <el-col :span="3">
                        <!-- 日期选择器宽度 -->
                        <el-form-item label="年月日">
                            <!-- <el-date-picker v-model="codeForm.date" type="date" placeholder="选择日期" format="YY-MM-DD" value-format="YYYYMMDD"></el-date-picker> -->
                            <el-date-picker v-model="codeForm.fullDate" type="date" placeholder="选择日期" format="YY-MM-DD" value-format="YYYYMMDD">
                            </el-date-picker>

                        </el-form-item>
                    </el-col>

                    <!-- 流水号 -->
                    <el-col :span="3">
                        <el-form-item label="流水号">
                            <el-select v-model="codeForm.serialNumber" placeholder="选择或输入">
                                <el-option v-for="n in 99" :key="n" :label="String(n).padStart(2, '0')" :value="String(n).padStart(2, '0')">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                </el-row>
                <!-- 显示编码预览 -->
                <div class="preview-titel">
                    文档编码预览:
                    <h3>{{ documentCode }}</h3>
                </div>
            </el-form>
        </el-card>

        <!-- 文档名称部分 -->
        <el-card class="section-card">
            <template #header>
                <div class="card-header">
                    <div class="header-content">
                        <edit class="iconImg icon-style"></edit>
                        <span>文档名称</span>
                    </div>
                </div>
            </template>
            <el-form :model="nameForm" label-width="80px">
                <el-row :gutter="20">
                    <!-- 添加自定义文本输入 -->
                    <el-col :span="4">
                        <el-form-item label="自定义文本">
                            <el-input v-model="nameForm.customText" placeholder="输入文本"></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- 添加下拉选择框 -->
                    <el-col :span="4" v-for="(field, index) in nameFields" :key="index">
                        <el-form-item :label="field">
                            <el-select v-model="nameForm[`field${index}`]" placeholder="请选择">
                                <el-option v-for="option in nameOptions" :key="option.value" :label="option.label" :value="option.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 显示名称预览 -->
                <div class="preview-titel">
                    文档名称预览:
                    <h3>{{ documentName }}</h3>
                </div>
            </el-form>
        </el-card>

        <!-- 添加保存按钮 -->
        <el-button type="primary" class="el-btn" @click="saveDocument">生成&保存</el-button>
    </div>
</template>

<script setup>
import { reactive,computed,onMounted } from "vue";

// 下拉选项标题
const codeFields=["用途标识","产品类别","年月日","流水号"];
const nameFields=["用途标识","产品类别","关键规格","年月日","流水号"];

// 文档编码表单
const codeForm=reactive({
    field0: "",
    field1: "",
    // field2: "",
    // field3: "",
    date: "",
    fullDate: '', // 使用 fullDate 存储完整日期
    serialNumber: '',
});

// 文档名称表单
const nameForm=reactive({
    field0: "",
    field1: "",
    field2: "",
    field3: "",
    field4: "",
    customText: "",
});

// 添加下拉选项数据
const codeOptions={
    option1: [
        { value: "W",label: "W-微储" },
        { value: "M",label: "M-中性" },
        { value: "C",label: "C-客户" },
        { value: "O",label: "O-其他" },
    ],

    option2: [
        { value: "B1",label: "B1-机架电池" },
        { value: "B2",label: "B2-壁挂电池" },
        { value: "B3",label: "B3-高压堆叠" },
        { value: "B4",label: "B4-铅改锂" },
        { value: "U1",label: "U1-户外电池柜" },
        { value: "U2",label: "U2-户外一体储能柜" },
        { value: "C1",label: "C1-集装箱" },
        { value: 'O',label: 'O-其他类特殊类' },
    ],

    // option3: [
    //   {value: "W", label: "W-微储"},
    //   {value: "M", label: "M-中性"},
    //   {value: "C", label: "C-客户"},
    //   {value: "O", label: "O-其他"},
    // ],

    // option4: [
    //   {value: "W", label: "W-微储"},
    //   {value: "M", label: "M-中性"},
    //   {value: "C", label: "C-客户"},
    //   {value: "O", label: "O-其他"},
    // ],
};
// 添加更多选项...

const nameOptions=[
    { value: "option1",label: "选项1" },
    { value: "option2",label: "选项2" },
    { value: "option3",label: "选项3" },
    // 添加更多选项...
];

// 计算属性生成文档编码 4个字段拼接生成编码
const documentCode=computed(() => {
    return `${codeForm.field0}${codeForm.field1}${formattedDate.value}${codeForm.serialNumber}`;
});

// 计算属性生成文档名称 
const documentName=computed(() => {
    return `${nameForm.field0} ${nameForm.field1} ${nameForm.field2} ${nameForm.field3} ${nameForm.field4} ${nameForm.customText}`;
});

const saveDocument=() => {
    // 实现保存逻辑，例如发送请求到后端服务器
    console.log("保存的文档编码:",documentCode.value);
    console.log("保存的文档名称:",documentName.value);
    // 实际的保存逻辑
};



// 在组件挂载时自动设置默认流水号值
onMounted(() => {
    codeForm.serialNumber='01';
});

// 添加计算属性来处理日期
const formattedDate = computed(() => {
    if (codeForm.fullDate) {
        return codeForm.fullDate.slice(2); // 去掉前两位年号
    }
    return '';
});


 


</script>

<style lang="scss" scoped>
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap');

body {
    font-family: 'Roboto', sans-serif;
    font-size: 1rem;
}

* {
    white-space: nowrap;
}

.document-generate-view {
    padding: 10px;

    .card-header {
        display: flex;
        justify-content: left;
        align-items: left;

        .header-content {
            display: flex;
            align-items: center;
            /* 控制垂直居中 */
            justify-content: start;
            /* 控制水平对齐，这里是从开始位置对齐，您可以根据需要使用center, start, end */
            color: #409eff !important;
        }
    }

    text-align: center;

    .iconImg {
        width: 20px;
        height: 20px;
    }

    .el-btn {
        margin: 20px auto;
    }

    .preview-titel {
        text-align: left;
        padding: 10px;
        display: flex;
        /* 启用Flexbox布局 */
        align-items: center;
        /* 垂直居中对齐子元素 */
        margin-right: 1rem;
        padding-right: 1rem;
        h3 {
            padding-left: 1rem;
        }
    }
}
</style>
